<template>
<div>
  <div v-show="$route.path=='/classify/c'">
    <section class="top">
      <h4>C语言</h4>
      <router-link to="/classify"><span class="iconfont">&#xe669;</span>返回</router-link >
    </section>
<!-- 内容区域 -->
    <div class="rrr">
      <button @click="Getstatics">获取数据</button>
        <div class="item_bottom">
            <ul>
                <li class="item">
                    <div class="ar mb20">
                        <a href="#" class="fl"><img src="@/assets/images/29.png"></a>
                        <div class="fr">
                            <router-link to="/classify/c/Cdetail1" class="jihua">C语言学习笔记</router-link ><br>
                        
                            <span class="iconfont">&#xe8cf;</span>
                            <span>发表于 2022-07-01</span>
                            <span>|</span>
                            <span class="iconfont">&#xe60c;</span>
                            <a href="#"><span>前端学习</span></a>
                            <span>|</span>
                            <span class="iconfont">&#xe60d;</span>
                            <a href="#"><span>c语言</span></a>
                            <p>C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。不需要任何运行环境支持便能运行的高效率程序设计语言。</p>
                        </div>
                    </div>
                    <!-- <div class="br mb20">
                        <div class="fl">
                            <a href="#" class="jihua">Postman</a><br>

                            <span class="iconfont">&#xe8cf;</span>
                            <span>发表于 2022-06-22</span>

                            <span>|</span>

                            <span class="iconfont">&#xe60c;</span>
                            <a href="#"><span>微服务核心</span></a>

                            <span>|</span>

                            <span class="iconfont">&#xe60d;</span>
                            <a href="#"><span>Java MyBatis</span></a>
                            <p>MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、</p>
                            <p class="hidd">存储过程以及高级映射。MyBatis 避免了几乎所有的对的对的</p>
                        </div>
                        <a href="#" class="fr"><img src="../images/45.png"></a>
                    </div>
                    <div class="ar mb20">
                        <a href="#" class="fl"><img src="../images/43.png"></a>
                        <div class="fr">
                            <a href="#" class="jihua">Webpack学习笔记</a><br>

                            <span class="iconfont">&#xe8cf;</span>
                            <span>发表于 2022-06-22</span>

                            <span>|</span>

                            <span class="iconfont">&#xe60c;</span>
                            <a href="#"><span>微服务核心</span></a>

                            <span>|</span>

                            <span class="iconfont">&#xe60d;</span>
                            <a href="#"><span>Java MyBatis</span></a>
                            <p>webpack is a module bundler. This means webpack takes modules with dependencies and emits static assets representing those modules.</p>
                        </div>
                    </div>
                    <div class="br mb20">
                        <div class="fl">
                            <a href="#" class="jihua">Java正则表达式学习</a><br>

                            <span class="iconfont">&#xe8cf;</span>
                            <span>发表于 2022-06-22</span>

                            <span>|</span>

                            <span class="iconfont">&#xe60c;</span>
                            <a href="#"><span>前端学习</span></a>

                            <span>|</span>

                            <span class="iconfont">&#xe60d;</span>
                            <a href="#"><span>前端学习 前端计划</span></a>

                            <p>Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境。2009的时候由大神 Ryan Dahl 开发的。</p>
                        </div>
                        <a href="#" class="fr"><img src="../images/44.png"></a>
                    </div>
                    <div class="ar mb20">
                        <a href="#" class="fl"><img src="../images/52.png"></a>
                        <div class="fr">
                            <a href="#" class="jihua">Nodejs学习笔记</a><br>

                            <span class="iconfont">&#xe8cf;</span>
                            <span>发表于 2022-07-12</span>

                            <span>|</span>

                            <span class="iconfont">&#xe60c;</span>
                            <a href="#"><span>前端学习</span></a>

                            <span>|</span>

                            <span class="iconfont">&#xe60d;</span>
                            <a href="#"><span>前端学习 蜡笔小新</span></a>
                            <p>《蜡笔小新》是由日本漫画家臼井仪人创作的漫画。</p>
                        </div>
                    </div>
                    <div class="br mb20">
                        <div class="fl">
                            <a href="#" class="jihua">Vue2学习笔记</a><br>

                            <span class="iconfont">&#xe8cf;</span>
                            <span>发表于 2022-05-28</span>

                            <span>|</span>

                            <span class="iconfont">&#xe60c;</span>
                            <a href="#"><span>前端学习</span></a>

                            <span>|</span>

                            <span class="iconfont">&#xe60d;</span>
                            <a href="#"><span>前端框架 Vue2</span></a>

                            <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面</p>
                            <p class="hidd">的渐进式框架。与其它大型框架不同的是，Vue 被设计为适合使用的</p>
                        </div>
                        <a href="#" class="fr"><img src="../images/10.png"></a>
                    </div> -->
                </li>
            </ul>
        </div>
        <div id="div1">
          <p>这是初始化内容</p>
        </div>
        <button @click="submit">提交</button><br><br>
        <button @click="getInfo">获取userInfo</button>
    </div>
  </div>
  <router-view></router-view>
</div>
</template>

<script>
import E from 'wangeditor'
export default {
    name:'Sort1',
    data(){
      return{
        texttxt:"",
      }
    },
    mounted(){
      const editor = new E("#div1");
      editor.config.onchange = (newHtml) =>{
        this.editorData = newHtml;
      };
      editor.create();
      this.texttxt = editor;
    },
    methods:{
      Getstatics(){
        this.$store.dispatch('categoryList')
      },
      submit(){
        console.log(this.texttxt.txt.html())
      },
      getInfo(){
        this.$store.dispatch('getUserInfo')
      }
    }
}
</script>

<style scoped>
    .top {
    height: 420px;
    background-image: url("@/assets/images/8.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-top: 170px;
    position: relative;
}

.top h4 {
    text-align: center;
    font-size: 50px;
    color: white;
}
.top span{
    font-size: 16px;
    margin-right: 5px;
}
.top a{
    padding-top: 5px;
    text-align: center;
    font-size: 16px;
    position: absolute;
    left: 100px;
    bottom: 340px;
    color: white;
    border: 1px solid white;
    width: 85px;
    height: 35px;
}
.top a:hover{
    background-color: rgb(245, 212, 217);
}
.rrr {
    margin: 50px auto; 
    width: 1200px;
    height: 1850px;
}
.rrr .ar,
.br {
  border: 1px solid rgb(179, 177, 177);
  width: 1000px;
  height: 290px;
  border-radius: 5%;
  box-shadow: 10px 10px 16px rgb(222, 221, 221);
  margin-left: 90px;
  overflow: hidden;
}

.rrr .ar img {
  width: 400px;
  height: 290px;
}

.rrr .ar .fr {
  margin-right: 100px;
  margin-top: 80px;
  width: 450px;
  height: 120px;
  /* background-color: pink; */
}

.rrr .ar .jihua {
  display: inline-block;
  font-size: 28px;
  margin-bottom: 10px;
}

.rrr .ar span{
  margin-right: 5px;
  font-size: 15px;
  color: gray;
  /* margin-top: 10px; */
  /* margin-bottom: px; */
}

.rrr .ar p {
  display: inline-block;
  font-size: 17px;
  margin-top: 10px;
}

.rrr .ar .hidd {
  width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rrr .br img {
  width: 400px;
  height: 290px;
}

.rrr .br .fl {
  margin-left: 45px;
  margin-top: 80px;
  text-align: left;
  width: 450px;
  height: 100px;
  /* background-color: pink; */
}

.rrr .br .jihua {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 28px;
}

.rrr .br span {
  margin-right: 5px;
  font-size: 15px;
  color: gray;
}

.rrr .br p {
  font-size: 17px;
  margin-top: 10px;
}

.rrr .br .hidd {
  width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item_bottom ul li {
  /* height: 400px; */
  padding: 10px;
  /* border: 1px solid #ccc; */
  /* border-top: none; */
}
.item_top ul .current {
  background-color: skyblue;
  height: 40px;
}
.item_bottom ul .current {
  display: block;
}
.rrr a:hover,
.shortcut a:hover {
  color: skyblue;
}
</style>